<template>
  <div class="addKnowledge">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="小程序类型"
        prop="app_type"
      >
        <el-select
          v-model="ruleForm.app_type"
          style="width:100%;"
          :disabled="Boolean(rowInfo.id)"
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="(item,index) in typeList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>

        </el-select>
      </el-form-item>
      <el-form-item
        label="请输入问题"
        prop="problem"
      >
        <el-input
          v-model="ruleForm.problem"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="回复答案"
        prop="answer"
      >
        <editor
          v-model="ruleForm.answer"
          placeholder="请输入,可粘贴复制图片"
          class="editor"
          :is-submit="isSubmit"
          @input="contentInput"
          @ready="ready"
        ></editor>
        <p class="red">图片格式支持 jpg jepg png,  视频格式只支持 mp4 格式</p>
      </el-form-item>
    </el-form>
    <span class="dialog-footer rowFlex">
      <el-button
        class="btn"
        @click="close"
      >取 消</el-button>
      <el-button
        :loading="loading"
        class="btn"
        type="primary"
        @click="submit"
      >确 定</el-button>
    </span>
  </div>
</template>

<script>
import editor from './editor.vue'
import { answerSave } from '@/api/knowLedge'
export default {
  components: {
    editor
  },
  props: {
    rowInfo: {
      default: {},
      typeof: Object
    }
  },
  data() {
    return {
      typeList: [
        { label: '微信小程序', value: '1' },
        { label: '抖音小程序', value: '2' }
      ],
      ruleForm: {
        app_type: ['1'],
        problem: '',
        answer: ''
      },
      editor: null,
      loading: false,
      isSubmit: false,
      rules: {
        app_type: [
          { required: true, message: '请选择小程序类型', trigger: 'change' }
        ],
        problem: [
          { required: true, message: '请输入问题', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请输入答案', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.ruleForm.app_type = this.rowInfo.app_type
    if (this.rowInfo.id) {
      const { id, problem, answer, app_type } = this.rowInfo
      this.ruleForm = {
        id,
        problem,
        answer,
        app_type: [app_type]
      }
    }
  },
  methods: {
    ready(editorInstance) {
      this.editor = editorInstance
    },
    contentInput(value) {
      this.ruleForm.answer = value
    },
    close() {
      this.$emit('cancel')
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.answerSave()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async answerSave() {
      console.log(this.ruleForm.answer, '4444')
      this.isSubmit = true
      setTimeout(async () => {
        this.isSubmit = false
        const res = await answerSave(this.ruleForm)
        if (res.status_code === 1) {
          this.$message.success(res.msg)
          this.$emit('ok')
          this.close()
        }
      }, 500)
    }

  }
}
</script>

<style lang="scss" scoped>
.addKnowledge {
  padding-bottom: 100px;
  height: auto;
  .demo-ruleForm {
    padding: 20px;
  }
  .red {
    color: rgb(247, 95, 97);
  }
}
</style>